import React, { Component } from 'react'
import { View, Text, StyleSheet, Slider, TouchableNativeFeedback } from 'react-native'
import { connect } from 'react-redux'
import MyIcon from '../../../../utils/MyIcon'
import actionTypes from '../../../../store/actionTypes'

function setPlaying(playing) {
  return {
    type: actionTypes.SETPLAYING,
    payload: {
      playing
    }
  }
}

const IconColor = "#e9e9e9"

const styles = StyleSheet.create({
  progressBar: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  text: {
    fontSize: 10,
    color: '#fff',
    paddingHorizontal: 18
  },
  slider: {
    flex: 1
  },
  btnBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 16
  },
  btnItem: {
    paddingHorizontal: 16
  }
})

class PlayPanel extends Component {
  render() {
    const { playing, setPlaying } = this.props;
    return (
      <View>
        <View style={styles.progressBar}>
          <Text style={styles.text}>00:00</Text>
          <Slider style={styles.slider} minimumTrackTintColor="#f5f5f5" thumbTintColor="#f5f5f5" maximumTrackTintColor="#525657"/>
          <Text style={styles.text}>04:00</Text>
        </View>
        <View style={styles.btnBar}>
          <View style={styles.btnItem}>
            <MyIcon name="play" size={26} color={IconColor}/>
          </View>
          <View style={styles.btnItem}>
            <MyIcon name="play" size={26} color={IconColor}/>
          </View>
          <TouchableNativeFeedback onPress={ () => setPlaying(!playing) }>
            <View style={styles.btnItem}>
              <MyIcon name={playing ? 'stop_border' : 'play_border'} size={50} color={IconColor}/>
            </View>
          </TouchableNativeFeedback>
          <View style={styles.btnItem}>
            <MyIcon name="play" size={26} color={IconColor}/>
          </View>
          <View style={styles.btnItem}>
            <MyIcon name="play" size={26} color={IconColor}/>
          </View>
        </View>
      </View>
    )
  }
}

export default connect(
  state => {
    return {
      playing: state.playing
    }
  },
  {
    setPlaying
  }
)(PlayPanel)